使用非html5实现js板连连看游戏示例代码

向大家分享一款如何实现js版连连看游戏,如下图所示:

首先看一下html的布局方式在index.html文件中:


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>连连看</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<center>
<div id="whole">
<div id="gamePanel" tabindex="0">
<div id="pieces">
</div>
</div>
<div id="gameLogo">
</div>
<div id="scorePanel">
<span>分 数</span>
</div>
<div id="score">
<span>0</span>
</div>
<div id="timePanel">
<span>时 间</span>
</div>
<div id="time">
<span>0</span>
</div>
<div id="button">
<input id="start" type="button" onclick="Start();" value="开始"></input>
<input id="reset" type="button" onclick="Reset();"value="重置"></input>
</div>
</div>
</center>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/piece.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>

css文件夹下的index.css文件如下:


代码如下:

body {

font-size : 16px;
font-weight : bold;
color : grey;

}

#whole {

border : 1px double #999999;
border-width : 5px;
width : 800px;
height : 505px;
position : relative;

}

#gamePanel {

margin: 1px 1px 1px 1px;
width : 602px;
height : 502px;
background : url(../img/background.gif) repeat;
position : absolute;

}

#pieces {

margin-top : 35px;
border : 1px solid #999999;
width : 546px;
height : 434px;
position: relative;

}

#pieces .piece {

width : 32px;
height : 36px;
position : relative;
cursor : pointer;
float : left;

}

#pieces .track {

width : 32px;
height : 36px;
position : relative;
float : left;

}

#pieces .track2 {

width : 32px;
height : 36px;
position : relative;
float : left;
background : red;

}

#gameLogo {

margin-top : 60px;
border : 1px solid #999999;
left : 607px;
width : 187px;
height : 73px;
background : url(../img/logo.gif);
position: absolute;

}

#scorePanel {

border : 1px solid #999999;
left : 607px;
top : 200px;
width : 187px;
height : 30px;
position : absolute;

}

#score {

border : 1px solid #999999;
left : 607px;
top : 240px;
width : 187px;
height : 30px;
position : absolute;

}

#timePanel {

border : 1px solid #999999;
left : 607px;
top : 300px;
width : 187px;
height : 30px;
position : absolute;

}

#time {

border : 1px solid #999999;
left : 607px;
top : 340px;
width : 187px;
height : 30px;
position : absolute;

}

#button {

border : 1px solid #999999;
left : 607px;
top : 400px;
width : 187px;
height : 30px;
position : absolute;

}

下面让我们来看一下最核心的js部分实现代码,js部分分为三个源文件即game.js、map.js、piece.js每一个源文件对应一个类,其中本游戏通过game类来操纵map和图片piece对象:

game.js代码如下:


代码如下:

// 游戏控制类
var Game = {

// 游戏背景
gamePanel : null,

// 分数
score : 0,

// 时间
time : 0,

// 图片映射表
pieceMap : null,

// 图片列表
pieceList : [],

// 图片列表不包含图片
pieceImgList : [],

// 图片随机数列表
randomList : [],

// 轨迹列表
trackList : [],

// 游戏是否开始
isGameBigin : false,

// 游戏是否结束
isGameOver : false,

// 游戏是否重置
isGameReset : false,

// 图片元素是否第一次点击
isFirstClick : true,

// 开始游戏
start : function() {

document.getElementById("start").disabled = true;
document.getElementById("reset").disabled = false;

if (this.isGameReset) {

this.isGameOver = false;
this.startTime();

return;

} else if (this.isGameBegin) {

return;

} else {

this.init();

return;

}

},

reset : function() {

document.getElementById("start").disabled = false;
document.getElementById("reset").disabled = true;

this.clear();
this.initPieces();
this.initImgPieces();
this.time = 0;
document.getElementById("time").innerHTML = 0;

this.score = 0;
document.getElementById("score").innerHTML = 0;

this.isGameReset = true;
this.isGameBegin = true;

},

// 初始化
init : function() {

if (this.isGameBegin) {

return;

}

this.pieceMap = new Map();

var _this = this;

this.time = 0;
this.startTime();

this.gamePanel = document.getElementById("pieces");

this.initPieces();
this.initImgPieces();

this.isGameBegin = true;

},

// 将随机生成的150张图片添加进画布
initPieces : function() {

var _this = this;

this.initRandomList();

// 打乱随机列表排序
this.messRandomList();

for (var i = 0; i < 204; i ++) {

var piece = new Piece(this);
this.pieceList.push(piece);

var x = (i%17);
var y = Math.floor(i/17);

this.pieceMap.put(x+","+y, piece);

piece.setPosition(x, y);
this.gamePanel.appendChild(piece.dom);

if (x == 0 || x == 16 || y == 0 || y == 11) {

piece.track = document.createElement("div");
piece.track.className = "track";
piece.dom.appendChild(piece.track);
piece.isTracked = true;

continue;

} else {

if (x == 1 || x == 15 || y == 1 || y == 10) {

piece.setAtEdge(true);

}

this.pieceImgList.push(piece);

}

}

},

// 初始化图片
initImgPieces : function() {

for (var i = 0; i < this.pieceImgList.length; i ++) {

this.pieceImgList[i].initImg();
this.pieceImgList[i].img.src = "img/pieces/"+this.randomList[i]+".gif"
this.pieceImgList[i].setImgSrc(this.pieceImgList[i].img.src);

// 执行图片点击事件
this.pieceImgList[i].onClick();

}

},

// 初始化随机表
initRandomList : function() {

// 获取随机数列,成双出现
for (var i = 0; i < 75; i ++) {

var random = parseInt(Math.random()*22*10000, 10);
var number = random%23;
this.randomList.push(number);
this.randomList.push(number);

}

},

// 打乱随机表
messRandomList : function() {

for (var i = 0; i < this.randomList.length; i ++) {

var random = parseInt(Math.random()*15*10000, 10);
var number = random%150;

var temp;
temp = this.randomList[i];
this.randomList[i] = this.randomList[number];
this.randomList[number] = temp;

}

},

// 开始计时
startTime : function() {

var _this = this;

if (this.isGameOver) {

return;

} else {

this.time ++;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true;
setTimeout(function() {_this.startTime();}, 1000);

}

},

// 清除
clear : function() {

for (var i = 0; i < this.pieceList.length; i ++) {

this.gamePanel.removeChild(this.pieceList[i].dom);

}

this.pieceList = [];
this.randomList = [];
this.pieceImgList = [];

this.isGameOver = true;
this.isGameBegin = false;

}

}

window.onload = function() {

document.getElementById("start").disabled = false;
document.getElementById("reset").disabled = true;

}

// 游戏开始入口
function Start() {

Game.start();

}

// 游戏重置入口
function Reset() {

Game.reset();

}

自定义的js版映射结构map.js源文件如下:


代码如下:

var Map = function(){

this.data = [];

}

Map.prototype = {

put : function(key, value) {

this.data[key] = value;
},

get : function(key) {

return this.data[key];
},

remove : function(key) {

this.data[key] = null;

},

isEmpty : function() {

return this.data.length == 0;
},

size : function() {

return this.data.length;
}

}

图片类piece.js源文件如下:


代码如下:

var Piece = function(game) {

// 游戏对象
this.game = game;

// 是否为边缘元素
this.isEdge = false;

// 是否挨着边缘元素
this.atEdge = false;

// 图片dom元素
this.dom = null;

// 图片元素
this.img = null;

// 图片元素来源
this.src = null;

// 轨迹元素
this.track = null;

// 是否可以作为轨迹
this.isTracked = false;

// 选中标记元素
this.selected = null;

// 图片横向排列
this.x = 0;

// 图片纵向排列
this.y = 0;

// 图片闪烁Id
this.flashId = null;

// 图片是否点击
this.onClicked = false;

// 闪烁次数
this.flashCount = 0;

this.init();

}

Piece.prototype = {

// 初始化
init : function() {

this.dom = document.createElement("div");
this.dom.className = "piece";

this.selected = document.createElement("img");

},

// 初始化图片
initImg : function() {

this.img = document.createElement("img");

this.dom.appendChild(this.img);

},

// 满足算法后初始化track元素
initTrack : function() {

if (this.flashId != null) {

// 停止闪烁
this.stopFlash();

}

//alert("initTrack middle");
if (this.track != null) {

return;
}

this.onClicked = false;

this.dom.removeChild(this.img);

this.track = document.createElement("div");
this.track.className = "track";
this.dom.appendChild(this.track);

},

// 位图片设置来源
setImgSrc : function(src) {

this.src = src;

},

// 为图片设置二维排列位置
setPosition : function(x, y) {

this.x = x;
this.y = y;

},

// 为图片设置选中元素
setSelected : function() {

if (this.flashCount ++ % 2 == 0) {

//this.dom.removeChild(this.img);
//this.selected.src = "img/selected.gif";
//this.dom.appendChild(this.selected);
this.img.src = "img/pieces/flash.gif";

} else {

//if (this.selected != null) {

// this.dom.removeChild(this.selected);

//}

this.img.src = this.src;
//this.dom.appendChild(this.img);

}

},

// 设置是否为边缘元素
setEdge : function(isEdge) {

this.isEdge = isEdge;

},

// 设置是否挨着边缘元素
setAtEdge : function(atEdge) {

this.atEdge = atEdge;

},

// 开始闪烁
flash : function() {

var _this = this;
this.flashId = setInterval(function() {_this.setSelected();}, 500);

},

// 停止闪烁
stopFlash : function() {

clearInterval(this.flashId);

if (this.flashCount % 2 == 1) {

//if (this.selected != null) {

// this.dom.removeChild(this.selected);

//}

this.img.src = this.src;
//this.dom.appendChild(this.img);

}

},

// 对象被选择的内部函数
onClick : function() {

if (this.onClicked) {

return;

}

var _this = this;

this.img.onclick = function() {

if (!document.getElementById("start").disabled) {

return;

}

if (_this.onClicked) {

return;

}

if (_this.checkPiece()) {

return;

}

_this.flash();
_this.onClicked = true;

};

},

// 检查是否有被点击的图片
checkPiece : function() {

for (var i = 0; i < this.game.pieceList.length; i ++) {

if (this.game.pieceList[i].onClicked && !this.game.pieceList[i].equal(this)) {

if (this.game.pieceList[i].equalImage(this)) {

//alert("The same Image");
this.searchTrack(this.game.pieceList[i]);

} else {

this.game.pieceList[i].stopFlash();
this.game.pieceList[i].onClicked = false;
this.onClicked = false;

return false;

}

return true;

} else {

continue;

}

}

return false;

},

// 是否为同一个对象
equal : function(piece) {

return (this.x == piece.x && this.y == piece.y);

},

// 是否为同一个图片
equalImage : function(piece) {

return this.src == piece.src;

},

// 搜寻路径
searchTrack : function(piece) {

if (this.isNear(piece)) {

this.linkTrack(piece);

return;
}

if (this.isReach(piece) || this.isReach2(piece)) {

this.linkTrack(piece);

return;
}

},

// 是否相邻
isNear : function(piece) {

var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)
|| (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x);

return a;
},

// 直线
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {

return true;

}

var a = false;
var b = false;

// 沿y轴方向搜索
if (this.x == piece.x) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
//alert("this.x == piece.x: " + piece.x + "," + i);
if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {

a = true;

this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));

continue;
} else {

a = false;
this.game.trackList = [];

return a;
}

}

}

// 沿x轴方向搜索
if (this.y == piece.y) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {
//alert("this.y == piece.y: " + i + "," + piece.y);
if (this.game.pieceMap.get(i + "," + piece.y).isPass()) {

b = true;
this.game.trackList.push(this.game.pieceMap.get(i + "," + piece.y));

continue;
} else {

b = false
this.game.trackList = [];

return b;
}

}

}

return a || b;
},

// 拐一次弯搜索
isReach1 : function(piece) {
//alert("isReach1");
var corner_1 = this.game.pieceMap.get(this.x + "," + piece.y);
var corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);

var _this = this;

if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&& corner_1.isPass()) {

//alert("corner_1: " + this.x + "," + piece.y);
this.game.trackList.push(corner_1);

return true;
}

if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& corner_2.isPass()) {
//alert("corner_2: " + piece.x + "," + this.y);
this.game.trackList.push(corner_2);

return true;
}

return false;
},

// 直接或拐一次弯搜索
isReach : function(piece) {

var a = this.isStraightReach(piece);

var b = this.isReach1(piece);

return a || b;
},

// 拐两次弯搜索
isReach2 : function(piece) {

// 沿x轴正向搜索
for (var i = this.x + 1; i < 17; i ++) {

if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));

return true;
}

}

// 沿x轴搜索
for (var i = this.x - 1; i >= 0; i --) {

if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));

return true;
}

}

// 沿y轴搜索
for (var i = this.y - 1; i >= 0; i --) {

if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));

return true;
}

}

// 沿y轴正向搜索
for (var i = this.y + 1; i < 12; i ++) {

if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList = [];

break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));

return true;
}

}

return false;
},

// 路径连接
linkTrack : function(piece) {

this.initTrack();
piece.initTrack();
this.changeScore();
this.showTrack(piece);

},

// 显示足迹
showTrack : function(piece) {

this.game.trackList.push(piece);
this.track.className = "track2";

for (var i = 0; i < this.game.trackList.length; i ++) {
//alert(i);
this.game.trackList[i].track.className = "track2";

}

var _this = this;
setTimeout(function() {_this.hideTrack()}, 500);

},

// 隐匿足迹
hideTrack : function() {

for (var i = 0; i < this.game.trackList.length; i ++) {

this.game.trackList[i].track.className = "track";

}

this.game.trackList = [];
this.track.className = "track";
this.isTracked = true;

},

// 分数增加
changeScore : function() {

this.game.score += 100;
document.getElementById("score").innerHTML = this.game.score;

},

min : function(a, b) {

if (a < b) {

return a;

} else {

return b;

}

},

max : function(a, b) {

if (a > b) {

return a;

} else {

return b;

}

},

// 判断是否通过
isPass : function() {

return this.track != null;
}

}

以上是源文件的代码,具体的实现代码请关注CSDN中zhangjinpeng66下载。下面讲一下连连看游戏最核心的部分,js实现搜索路径。

js实现搜索路径算法首先最简单的是判断两个图片能否直线到达函数代码如下:


代码如下:

// 直线
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {

return true;

}

var a = false;
var b = false;

// 沿y轴方向搜索
if (this.x == piece.x) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
//alert("this.x == piece.x: " + piece.x + "," + i);
if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {

a = true;

this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));

continue;
} else {

a = false;
this.game.trackList = [];

return a;
}

}

}

// 沿x轴方向搜索
if (this.y == piece.y) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {
//alert("this.y == piece.y: " + i + "," + piece.y);
if (this.game.pieceMap.get(i + "," + piece.y).isPass()) {

b = true;
this.game.trackList.push(this.game.pieceMap.get(i + "," + piece.y));

continue;
} else {

b = false
this.game.trackList = [];

return b;
}

}

}

return a || b;
},

该函数实现了连连看判断两图片是否符合连接条件的最简单的一步,然后是拐一次弯搜索。


代码如下:

// 拐一次弯搜索
isReach1 : function(piece) {
//alert("isReach1");
var corner_1 = this.game.pieceMap.get(this.x + "," + piece.y);
var corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);

var _this = this;

if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&& corner_1.isPass()) {

//alert("corner_1: " + this.x + "," + piece.y);
this.game.trackList.push(corner_1);

return true;
}

if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& corner_2.isPass()) {
//alert("corner_2: " + piece.x + "," + this.y);
this.game.trackList.push(corner_2);

return true;
}

return false;
},

在拐一次弯搜索的函数中调用了直接搜索的函数,同样最复杂的拐两次弯搜索也会调用拐一次弯搜索的函数。


代码如下:

// 拐两次弯搜索
isReach2 : function(piece) {

// 沿x轴正向搜索
for (var i = this.x + 1; i < 17; i ++) {

if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));

return true;
}

}

// 沿x轴搜索
for (var i = this.x - 1; i >= 0; i --) {

if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));

return true;
}

}

// 沿y轴搜索
for (var i = this.y - 1; i >= 0; i --) {

if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList = [];

break;

} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));

return true;
}

}

// 沿y轴正向搜索
for (var i = this.y + 1; i < 12; i ++) {

if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList = [];

break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {

this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));

return true;
}

}

return false;
},

该函数以点击的图片为中心分别沿x轴,y轴展开搜索。
以上是本游戏代码的全部内容。具体游戏源码请到CSDN中zhangjinpeng66的资源里下载。

时间: 2013-09-19

原生JavaScript编写canvas版的连连看游戏

本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos

JavaScript 打地鼠游戏代码说明

演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑):  说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc

纯JS实现五子棋游戏兼容各浏览器(附源码)

纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

javascript 制作坦克大战游戏初步 图片与代码

学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n

node.js适合游戏后台开发吗?

网站服务器和游戏服务器是怎么样联系到一起的? 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百人在同一个场景里面,每个客户端都需要收到其他所有人的操作信息. 其次,用户的操作是非常频繁的,一般的服务器倾向于持有长连接.而且这些链接的是频繁交互的,没有明显的持久的分区策略,所以限制了服务器的横向扩展,同一个场景往往只能放在一个物理机上面运行. 再次,端游通常是不敢把逻辑运算放客户端的,用户分分钟给你破解掉,改改金币,刷两件装备再常见不过了.所

原生JavaScript实现连连看游戏(附源码)

向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示:  首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

JS写的贪吃蛇游戏(个人练习)

JS贪吃蛇游戏,个人练习之用,放在这备份一下,   复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

JavaScript编写连连看小游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:

JS 拼图游戏 面向对象,注释完整。

在线演示 http://img.jb51.net/online/pintu/pintu.htm 复制代码 代码如下: <html> <head> <title>JS拼图游戏</title> <style>     body{         font-size:9pt;     } table{ border-collapse: collapse; } input{     width:20px; } </style> </he

用js做一个小游戏平台 (一)

记得上班写代码时,我们技术总监总说是要先"设计",那就先"设计"吧. ps:我是新手大家多多见谅. .网页游戏区域.就是说需要知道游戏在网页上的区域,如下: 在网页中插入一个div,设定宽高和id, <div id="GameFrame" style="width:400;height:400"></div> 然后再js中得到该对象, var _GameFrame = document.getEleme

用javascript做一个小游戏平台 (二) 游戏选择器

今天先预览一下今晚的成果,如下(挫了点,别扔砖头):今天主要设计了下选择器,就是进入游戏时展现游戏列表,然后用来选择游戏的一个白痴的功能. 选择器建立在昨天的游戏类基础上,针对昨天的代码我作了部分修改: 复制代码 代码如下: //5.游戏类:名称,逻辑方法,键盘方法,开始方法,开始关卡方法,结束方法 var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) { //游戏名 this._name = name || "未

跟老齐学Python之做一个小游戏

在讲述有关list的时候,提到做游戏的事情,后来这个事情一直没有接续.不是忘记了,是在想在哪个阶段做最合适.经过一段时间学习,看官已经不是纯粹小白了,已经属于python初级者了.现在就是开始做那个游戏的时候了. 游戏内容:猜数字游戏 太简单了吧.是的,游戏难度不大,不过这个游戏中蕴含的东西可是值得玩味的. 游戏过程描述 程序运行起来,随机在某个范围内选择一个整数. 提示用户输入数字,也就是猜程序随即选的那个数字. 程序将用户输入的数字与自己选定的对比,一样则用户完成游戏,否则继续猜. 使用次数

js仿3366小游戏选字游戏

本文实例为大家分享了js仿3366小游戏中"你是色盲吗"游戏,大家先来挑战一下 游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束. 操作说明: 鼠标点击选择颜色 1.效果图: 原图: 模仿: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

原生js编写2048小游戏

效果图: 代码如下: <!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; b

js猜数字小游戏的简单实现代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

js实现打地鼠小游戏

话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {

js实现俄罗斯方块小游戏分享

复制代码 代码如下: <!doctype html><html><head><style type="text/css">body { background:#000; font:25px/25px 宋体;}#box { float:left;width:252px;border:#999 20px ridge;color:#9f9;text-shadow:2px 3px 1px #0f0; }#info { float:left;col

JavaScript实现一个空中避难的小游戏

前言 最近在看js中的事件,之前也一直有用到事件,用到最多的就是onclick单击事件,还有填写表单信息时的用到的onfocus聚焦时间,和onblur事件,最近看到了onmousemove鼠标移动事件,觉得很神奇,就突然很想写一个小游戏,用到了setInterval函数.游戏的功能也很简单,就是天上掉纸片,小人儿要不停的躲,一旦纸片和小人儿相撞,就会game over! 代码如下: <!DOCTYPE html> <html> <head> <style>

纯js和css完成贪吃蛇小游戏demo

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212