最近在搞自己的网站，维护的时候准备放个贪吃蛇上去，顶一下原有的页面。

这个贪吃蛇有一点毒。原来设定了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 贪吃蛇代码的更多相关文章

  1. C++控制台贪吃蛇代码

    游戏截图: 以下是3个代码文件: Snake_Class.h文件: #ifndef SNAKE #define SNAKE #include<windows.h> #include< ...

  2. 转载——C++控制台贪吃蛇代码

    游戏截图: 以下是3个代码文件: Snake_Class.h文件: 1 #ifndef SNAKE 2 #define SNAKE 3 4 #include<windows.h> 5 #i ...

  3. 以前写的canvas 小游戏 贪吃蛇代码

    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...

  4. cocos2d-x学习笔记(贪吃蛇代码)

    方向键控制蛇运动:上↑:右→:下↓:左←. 百度网盘链接:https://pan.baidu.com/s/1c1FSXaw 提取密码:u1kr

  5. 自己用canvas写的贪吃蛇代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 贪吃蛇的java代码分析（三）

    代码剖析 在上一篇文章中,我们完成了贪吃蛇部分代码的构造.回头审视我们写的代码与思路,会发现我们遗漏了一个重要的地方,那就是:贪吃蛇的自身移动.想必大家都知道,贪吃蛇自身是会自己移动的,并且会跟随你的 ...

  7. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  8. python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

  9. JavaScript 小游戏 贪吃蛇

    贪吃蛇 代码: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <met ...

随机推荐

  1. 1、Dapper介绍

    1.Dapper是一个轻量级的O/R框架,性能强劲,支持原生sql与模型对象混合写法,通过DapperExtension插件可以实现纯模型的操作(零Sql)语句. 2.创建VS 项目,添加相关的依赖包 ...

  2. Java发送邮件Demo

    就是个Demo,有使用Spring的东西 package xxxxxxx.common.utils; import org.springframework.mail.javamail.JavaMail ...

  3. 【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效

    vue组件化应用,近期写的单个组件里有一个的渲染部分样式渲染不上去 因为同结构的其他组件均没有问题,所以排除是.vue文件结构的问题,应该是<style>内部的问题 <style l ...

  4. vuex 快速上手，具体使用方法总结（含使用例子）

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...

  5. H3C STP基本配置

  6. 【33.18%】【hdu 5877】Weak Pair (3种解法)

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Total Submissi ...

  7. 使用 koa-router 路由拆分

    根据功能不同,将路由拆分到不同的模块 目录结构: app.js const Koa = require('koa'); const Router = require('koa-router'); co ...

  8. CF1214

    CF1214 C题WA3发的菜鸡还能涨分 A 发现货币面值都是倍数关系,直接暴力枚举第第一种换了多少个更新答案就好了 B 按照题意模拟 C 首先,左括号的数量不等于有括号的数量一定无解 想等的话在括号 ...

  9. vue-learning：11 -js-nextTick()

    nextTick() 在jQuery中,如果我们要生成一个ul-li的列表元素,我们也不会在循环体中每生成一个li就将它插入到ul中,而是在循环体内拼接每个li,待循环体结束后,再一并添加到ul元素上 ...

  10. <QluOJ2018NewCode>计算几何（寄蒜几盒）

    题目描述 现在有一个圆圈,圆圈上有若干个点,请判断能否在若干个点中选择三个点两两相连组成一个等边三角形? 这若干个点在圆圈上按顺时针顺序分布. 如果可以的话输出"Yes"(不含引号 ...