用JavaScript实现贪吃蛇游戏

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>JavaScript实现贪吃蛇游戏_/艾孜尔江撰/</title><style>article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}body {background-color: #CCC;}h1 {text-align: center;}p {text-align: center;}canvas {display: block;margin: 0 auto;background-color: #666;}</style>
</head><body><h1>贪吃蛇</h1><div><canvas id="maincanvas" width="320" height="240"></div><p>使用WASD或HJKL或上下左右键控制方向</p><p>随着蛇身变长，速度也会变快</p><p>按空格开始游戏</p><p>艾孜尔江复现</p><script>var canvas = document.getElementById("maincanvas");var context = canvas.getContext("2d");var game, snake, food;game = {score: 0,fps: 8,over: false,message: null,start: function () {game.over = false;game.message = null;game.score = 0;game.fps = 8;snake.init();food.set();},stop: function () {game.over = true;game.message = 'GAME OVER - PRESS SPACEBAR';},drawBox: function (x, y, size, color) {context.fillStyle = color;context.beginPath();context.moveTo(x - (size / 2), y - (size / 2));context.lineTo(x + (size / 2), y - (size / 2));context.lineTo(x + (size / 2), y + (size / 2));context.lineTo(x - (size / 2), y + (size / 2));context.closePath();context.fill();},drawScore: function () {context.fillStyle = '#999';context.font = (canvas.height) + 'px Impact, sans-serif';context.textAlign = 'center';context.fillText(game.score, canvas.width / 2, canvas.height * 0.9);},drawMessage: function () {if (game.message !== null) {context.fillStyle = '#00F';context.strokeStyle = '#FFF';context.font = (canvas.height / 10) + 'px Impact';context.textAlign = 'center';context.fillText(game.message, canvas.width / 2, canvas.height / 2);context.strokeText(game.message, canvas.width / 2, canvas.height / 2);}},resetCanvas: function () {context.clearRect(0, 0, canvas.width, canvas.height);}};snake = {size: canvas.width / 40,x: null,y: null,color: '#0F0',direction: 'left',sections: [],init: function () {snake.sections = [];snake.direction = 'left';snake.x = canvas.width / 2 + snake.size / 2;snake.y = canvas.height / 2 + snake.size / 2;for (var i = snake.x + (5 * snake.size); i >= snake.x; i -= snake.size) {snake.sections.push(i + ',' + snake.y);}},move: function () {switch (snake.direction) {case 'up':snake.y -= snake.size;break;case 'down':snake.y += snake.size;break;case 'left':snake.x -= snake.size;break;case 'right':snake.x += snake.size;break;}snake.checkCollision();snake.checkGrowth();snake.sections.push(snake.x + ',' + snake.y);},draw: function () {for (var i = 0; i < snake.sections.length; i++) {snake.drawSection(snake.sections[i].split(','));}},drawSection: function (section) {game.drawBox(parseInt(section[0]), parseInt(section[1]), snake.size, snake.color);},checkCollision: function () {if (snake.isCollision(snake.x, snake.y) === true) {game.stop();}},isCollision: function (x, y) {if (x < snake.size / 2 ||x > canvas.width ||y < snake.size / 2 ||y > canvas.height ||snake.sections.indexOf(x + ',' + y) >= 0) {return true;}},checkGrowth: function () {if (snake.x == food.x && snake.y == food.y) {game.score++;if (game.score % 5 == 0 && game.fps < 60) {game.fps++;}food.set();} else {snake.sections.shift();}}};food = {size: null,x: null,y: null,color: '#0FF',set: function () {food.size = snake.size;food.x = (Math.ceil(Math.random() * 10) * snake.size * 4) - snake.size / 2;food.y = (Math.ceil(Math.random() * 10) * snake.size * 3) - snake.size / 2;},draw: function () {game.drawBox(food.x, food.y, food.size, food.color);}};var inverseDirection = {'up': 'down','left': 'right','right': 'left','down': 'up'};var keys = {up: [38, 75, 87],down: [40, 74, 83],left: [37, 65, 72],right: [39, 68, 76],start_game: [13, 32]};function getKey(value) {for (var key in keys) {if (keys[key] instanceof Array && keys[key].indexOf(value) >= 0) {return key;}}return null;}addEventListener("keydown", function (e) {var lastKey = getKey(e.keyCode);if (['up', 'down', 'left', 'right'].indexOf(lastKey) >= 0&& lastKey != inverseDirection[snake.direction]) {snake.direction = lastKey;} else if (['start_game'].indexOf(lastKey) >= 0 && game.over) {game.start();}}, false);var requestAnimationFrame = window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame;function loop() {if (game.over == false) {game.resetCanvas();game.drawScore();snake.move();food.draw();snake.draw();game.drawMessage();}setTimeout(function () {requestAnimationFrame(loop);}, 1000 / game.fps);}requestAnimationFrame(loop);</script>
</body></html>

欢迎广大读者交流分享代码、经验、及新观点、新主意！

用JavaScript实现贪吃蛇游戏_艾孜尔江撰相关推荐

JavaScript实现令人放松的小游戏_艾孜尔江撰
<html><head><!-- 由艾孜尔江·艾尔斯兰复现,转载或使用请注意标明出处.全程均使用鼠标交互,原游戏创作者不详,复现时有改动.使用时请在本地路径下放置一张玩家 ...
JavaScript实现打砖块游戏_艾孜尔江撰
<!DOCTYPE html> <html> <head><m ...
基于JavaScript实现游戏Pong_艾孜尔江撰
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
C++图书管理系统_艾孜尔江撰
#include<iostream> #include<conio.h> //控制台数据输入输出的函数 #include<fstream>//文件流 #includ ...
Git常用命令及其作用_艾孜尔江撰
撤销所有本次未提交的修改(相当于Tortoise Git的revert按钮): git checkout . 恢复某个已修改的文件(撤销未提交的修改): git checkout file-name ...
从0开始配置云服务器开发环境_艾孜尔江撰
选择云服务器系统为Cent OS最新版本或根据自己的需求选择稳定版本,并在完成部署之后从本地通过在终端中输入 ssh root@YourIPAdress 登录到服务器上,如果出现 ssh连接时提示TH ...
获取平面的法向量_艾孜尔江撰
Vector4 GetNormalVector(const Vector4& p1, const Vector4& p2, const Vector4& p3){Vector4 ...
点与平面的距离特征_艾孜尔江撰
点到平面距离公式 distance = Ax + By + Cz + D; //点P(x,y,z),平面的法向量n=(A,B,C),D是距原点的距离. 其中n = (A, B, C)是平面的法向量,D ...
关闭Windows更新后出现的桌面下方天气预报_艾孜尔江撰
问题阐述最近根据微软官方定时更新提示,更新了一下Windows 10系统,更新完之后最大的改变我感觉就是桌面右下角任务栏上出现了关于今日天气预报的相关提示,类似于任务栏上的广告.笔者不禁慨叹:&qu ...

用JavaScript实现贪吃蛇游戏_艾孜尔江撰

用JavaScript实现贪吃蛇游戏_艾孜尔江撰相关推荐

最新文章

热门文章