用html5语言制作贪吃蛇

最新推荐文章于 2024-04-24 15:59:50 发布

梦醒...

最新推荐文章于 2024-04-24 15:59:50 发布

阅读量3.3k

点赞数 1

分类专栏： html语言

本文链接：https://blog.csdn.net/qq_41020768/article/details/79272187

版权

我的博客

1、新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。

<html lang="en">
  <head>
    <meta charset=GB2312>
    <title></title>
    <meta name="description" content="HTML5/canvas demo, 500 particles to play around with." />
    <meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
   <style>
html, body {
            text-align: center;
            margin:0;
            padding:0;
            background: #000000; 
            color: #666666;
            line-height: 1.25em;
        }       

        #outer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1px;
            height: 1px;
            overflow: visible;
        }       

        #canvasContainer { 
            position: absolute;
            width: 1000px;
            height: 560px;
            top: -280px;
            left: -500px;
        }

        canvas { 
            border: 1px solid #333333; 
        }

        a {
            color: #00CBCB;
            text-decoration:none;
            font-weight:bold;
        }
        a:hover {
            color:#FFFFFF;
        }

        #output {
            font-family: Arial, Helvetica, sans-serif; 
            font-size: 0.75em;
            margin-top:4px;
        }

        #footer{
            font-size: 0.6em;
            font-family: Arial, Helvetica, sans-serif;
            position: absolute;
            bottom:8px;
            width:98%;
        }

</style>
  </head>

  <body>
    <div id="outer">
        <div id="canvasContainer">
            <canvas id="mainCanvas" width="1000" height="560" style="border:1px solid #c3c3c3;"></canvas>
            <div id="output"></div>
        </div>
    </div>
<script type="text/javascript">
(function(){

    var PI_2        = Math.PI * 2;

    var canvasW     = 1000;
    var canvasH     = 560;
    var numMovers   = 600;
    var friction    = 0.96;
    var movers      = [];
    var i=0;
    var canvas;
    var ctx;
    var canvasDiv;
    var outerDiv;
    var spring=0.12;
    var mouseX;
    var mouseY;
    var mouseVX;
    var mouseVY;
    var prevMouseX;
    var prevMouseY;
    var isMouseDown;
    var snake;
    var _food;
    var speed=3;
    var gameOver=false;
    var score=0;
    var Difficulty;
    var gameState=0;//一共四个值，0,1,2,3,4,5分别对应开始开始菜单界面，正在游戏中，暂停，结束，超时,查看排名
    var playButton;
    var configButton;
    var RankingButton;
    var buttonArray=[];
    var buttonIndex=0;
    var backImage;
    var remainTime;
    function initFarm(){
        canvas = document.getElementById("mainCanvas"); 
        if ( canvas.getContext ){
            setup();
            perform=setInterval( run , speed );
        }
    }

    function setup(){
        outerDiv  = document.getElementById("outer");
        canvasDiv = document.getElementById("canvasContainer");
        ctx = canvas.getContext("2d");
        remainTime=59;
        beginTime=new Date().getSeconds();
        snake=new Asphyre(200,200,500,5);
        _food=new food(20*Math.floor(Math.random()*50),20*Math.floor(Math.random()*28));
        snake.init();
        pirate=new pirateImage(150,0,256,256,0);
        playButton=new button("Play",900,200,70,20*Math.PI/180,"blue");
        configButton=new button("Config",900,300,70,20*Math.PI/180,"blue");
        rankingButton=new button("Ranking",900,400,70,20*Math.PI/180,"blue");
        buttonArray.push(playButton);
        buttonArray.push(configButton);
        buttonArray.push(rankingButton);
        mouseX = prevMouseX = canvasW * 0.5;

最低0.47元/天解锁文章

梦醒...

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
用html5语言制作贪吃蛇

我的博客1、新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。 html, body { text-align: center; margin:0; padding:0; background: #000000;
复制链接

扫一扫