html 贪吃蛇代码

时间：2019-11-04 09:15:30 阅读：135 评论：0 收藏：0 [点我收藏+]
标签：必须 panel lang init fun key script server false
最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。
这个贪吃蛇有一点毒。原来设定了100级；100级刚开局就挂了。后来改掉了选项菜单，修复了。
还有什么bug,欢迎点击侧边的QQ按钮联系我。
代码部分：
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>网站维护中</title>
        <script language="javascript">
        function snake(money,card){
    this.x = money;
    this.y = card;    
  }
function n97(){
    var initX = 10;
    var initY = 10;
    var SIZE = 20;    
    this.nokia6700 = new Array();
    this.nokia5230 = new Array();
    this.k209 = 0;
    this.targetX = 0;
    this.targetY = 0;
    this.manager = null;
    this.setObserver = function(obs){
        this.manager = obs;
    }
    this.init =  function(){
        this.nokia5230.length = 0;
        this.nokia6700.length = 0;    
        for(i = 0;i <= SIZE + 1; i++ ){
            this.nokia5230[i] = new Array();
        }
        for (i = 0; i <= SIZE + 1; i++) {
            this.nokia5230[i][0] = 1;
            this.nokia5230[SIZE + 1][i] = 1;
            this.nokia5230[0][i] = 1;
            this.nokia5230[i][SIZE + 1] = 1;
        }
        for (i = 5; i <= initX; i++) {
            var point = new snake(i, initY);
            this.addsnake(point);
        }
        this.k209 = 3;
        this.productFood();    
    }
    this.move = function(){
        var head = this.getHead();
        var point = new snake(head.x,head.y);
        switch (this.k209) {
            case 1:
                point.x-- ;        
                break;
            case 2:        
                point.y--;
                break;
            case 3:
                point.x++;        
                break;
            case 4:    
                point.y++;
                break;
        }
        this.process(point);
    }
    this.turn = function(code){
        var head = this.getHead();
        var point = new snake(head.x,head.y);
        switch(code - 36){
            case 1:
            if(this.k209 == 1 || this.k209 == 3)
            return;    
            point.x--;
            break;
            case 2:
            if(this.k209 == 2 || this.k209 == 4)
            return;
            point.y--;
            break;
            case 3:
            if(this.k209 == 1 || this.k209 == 3)
            return;
            point.x++;    
            break;
            case 4:
            if(this.k209 == 2 || this.k209 == 4)
            return;
            point.y++;
            break;        
        }
        this.k209 = code - 36;
        this.process(point);
    }
    this.process = function(point){
        if (this.ifDie(point)) {
            alert("你挂了！");
            this.manager.stopGame();
            return;
        }
        if (this.eatable(point)) {
            this.manager.removesnake(point);
            this.addsnake(point);
            this.manager.addScore();
            this.productFood();
        }
        else {
            this.addsnake(point);
            this.delTailsnake();    
        }
    }
    this.ifDie = function(point){
        return this.nokia5230[point.x][point.y] == 1;
    }
    this.getHead = function(){
        return this.nokia6700[0];
    }
    this.getTail = function(){
        return this.nokia6700[this.nokia6700.length - 1];
    }
    this.eatable = function(head){
        return (head.x == this.targetX && head.y == this.targetY);
    }
    this.addsnake = function(point){
        this.nokia5230[point.x][point.y] = 1;
        this.nokia6700.unshift(point);
        this.manager.drawsnake(point);
    }
    this.delTailsnake = function(){
        var point = this.nokia6700.pop();
        this.nokia5230[point.x][point.y] = 0;    
        this.manager.removesnake(point);
    }
    this.productFood = function(){        
        do {
            var x = Math.round(Math.random() * 100 % SIZE);
            var y = Math.round(Math.random() * 100 % SIZE);
        }
        while (this.nokia5230[x][y] == 1)
        this.targetX = x;
        this.targetY = y;
        this.manager.drawFood(x,y);
    }
}
 function Ga1900(canvasId){
     var WIDTH = 20;
     var canvas = document.getElementById(canvasId);
    var RED = "#FF0000"
    var WHITE = "#FFFFFF";
    var BLACK = "#000000";
    this.cxt = canvas.getContext("2d");
     var e398 = new n97();
    this.moveHandle = null;
    this.gamePanel = document.getElementById("gamePanel");
    this.scoreLabel =  document.getElementById("score");
    this.maxScoreLabel =  document.getElementById("highestScore");
    this.step = 0;
    this.score = 0;
    this.maxScore = 0;
    if(localStorage.maxScore)  
    this.maxScore = localStorage.maxScore;
    this.maxScoreLabel.innerHTML = this.maxScore;    
    e398.setObserver(this);
     this.startGame = function(step){
        this.clear();
         e398.init();
        this.score = 0;    
        this.scoreLabel.innerHTML = this.score; 
        this.gamePanel.onkeydown = onKeyDown;
        this.gamePanel.onkeydown = onKeyDown;
        this.step = parseInt(step);
         this.moveHandle = setInterval(move, 500 - 50 * this.step);
     }
    var move = function(){
        e398.move();
    }
    this.stopGame = function(){
        this.pause();
        document.getElementById("control").disabled = true;
        localStorage.maxScore = this.maxScore; 
    }
    this.pause = function(){
        clearInterval(this.moveHandle);
        this.gamePanel.onkeydown = null;
    }
    this.goon = function(){
        this.gamePanel.onkeydown = onKeyDown;
        this.moveHandle = setInterval(move, 500 - 50 * this.step);
    }
    this.addScore = function(){
        this.score += this.step;
        this.scoreLabel.innerHTML = this.score; 
        if(this.score > this.maxScore){
            this.maxScore = this.score;
            this.maxScoreLabel.innerHTML = this.score;
        }
    }
    var onKeyDown = function(e){
        if (e.which < 37 || e.which > 40) 
            return;
        e398.turn(e.which);
    }
        this.removeFood = function(x,y){
        this.cxt.fillStyle = WHITE;
        this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
    }
    this.drawFood = function(x,y){
        this.cxt.fillStyle = RED;
        this.cxt.fillRect((x - 1)*WIDTH, (y - 1)*WIDTH, WIDTH, WIDTH);
    }
    this.drawsnake = function(point){
        this.cxt.fillStyle = BLACK;
        this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);    
    }
    this.removesnake = function(point){
        this.cxt.fillStyle = WHITE;
        this.cxt.fillRect((point.x-1) * WIDTH, (point.y-1) * WIDTH, WIDTH, WIDTH);    
    }
    this.clear = function(){
        this.cxt.fillStyle = WHITE;
        this.cxt.fillRect(0,0,20*WIDTH,20*WIDTH);
    }
 }    
 </script>
    </head>
    <body>
        <div align="center">
        <h1>网站正在维护，先玩会贪吃蛇</h1>
        <div style="width:550px;margin:0 auto;height:400px;">
        <div id="gamePanel" tabindex="0"  style="width:400px; float:left;clear:left">
        <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;" >
            您的浏览器不支持canvas，请尝试更换浏览器，建议使用opera浏览本站，你会有更好的体验。
        </canvas>
        </div>
        <div id="scoreboard" style="float:right;">
            最高分
            <div id="highestScore" style="color:red; font-weight:bold;">
                0
            </div>
            <p></p> 
            得分
            <div id="score" style="font-weight:bold;">
                0
            </div>
        </div>
        </div>
        <p>
        等级: <select id="speed">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>9</option>
            </select>
        <button id="start" onclick="startGame(this)">开始</button>
        <button id="control" onclick="control(this)" disabled="true">暂停</button>
        </p>
        </div>
        <script language="JavaScript">         
            var gameMrg = new Ga1900("myCanvas");    
            function startGame(startBtn){
                var step = document.getElementById("speed").value;
                gameMrg.startGame(step);
                document.getElementById("gamePanel").focus();
                pause = true;
                var btn = document.getElementById("control");
                btn.innerHTML = "暂停";
                btn.disabled = false;    
            }    
            var pause = true;
            function control(btn){
                if (pause) {    
                    gameMrg.pause();
                    btn.innerHTML = "继续";
                }
                else{
                    gameMrg.goon();
                    btn.innerHTML = "暂停";
                    document.getElementById("gamePanel").focus();
                }
                pause = !pause;    
            }                    
        </script>
    </body>
</html>
贪吃蛇
注意：浏览器必须支持canvas才行。
html 贪吃蛇代码
标签：必须 panel lang init fun key script server false
原文地址：https://www.cnblogs.com/quqi/p/11790206.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行