尝试用canvas写小游戏
2015-11-02 10:09
302 查看
还是习惯直接开门见山,这个游戏是有一个老师抓作弊的学生,老师背身,点学生开始加分,老师会不定时回头,如果老师回头还在点学生在,就会被抓住,游戏game over。
1、写游戏首先是loading条,于是我们就有了以下的一端js代码
View Code
代码到这里就结束了,是不是很简单,欢迎各位大神指正,小弟刚学js,只因C#博文都没人赞,所以试试js看看。
试玩地址:点这里
1、写游戏首先是loading条,于是我们就有了以下的一端js代码
function game() { var that = this; this.teacher; this.studentLeft; this.studentRight; this.isOver = false; this.isStart = false; this.isFlag = true; this.index = 0; this.success = false; this.username = ''; this.percent = 0; this.number = 0; this.overHandler; this.left = {}; this.right = {}; this.time = 0; this.score = 0; this.number = 0; this.status = 0; this.interval = 0; this.sInterval = 0; this.level = [3, 2, 1]; this.difficulty = 0; this.gameTime = 1000; this.ticket = ''; this.totalScore = 0; this.totalRankingCount = 0; this.init = function () { this.left = { scoreContainer: ".game-score-left", name: "left", isPress: false, handler: null, score: 0, step: 5, time: 0 }; this.right = { scoreContainer: ".game-score-right", name: "right", isPress: false, handler: null, score: 0, step: 5, time: 0 }; var teacher_board = document.getElementById("gameteacher"); var studentLeft_board = document.getElementById("gamestudentleft"); var studentRight_board = document.getElementById("gamestudentright"); this.teacher = new teacher(teacher_board.getContext("2d")); this.studentLeft = new studentLeft(studentLeft_board.getContext("2d")); this.studentRight = new studentRight(studentRight_board.getContext("2d")); this.teacher.init({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.teacher.loadtrunback({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.teacher.loadback({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.teacher.loadstrun({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.teacher.loadtrunfront({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.teacher.loadcatchup({ x: 0, y: 0, w: teacher_board.width, h: teacher_board.height }, function () { that.loading(10); }); this.studentLeft.init({ x: 0, y: 0, w: studentLeft_board.width, h: studentLeft_board.height }, function () { that.loading(20); }); this.studentRight.init({ x: 0, y: 0, w: studentRight_board.width, h: studentRight_board.height }, function () { that.loading(20); }); }; this.loading = function (percent) { this.percent = this.percent + percent; $("#progressbarbj").css("width", this.percent + "%"); $(".game-percent").text(this.percent); if (this.percent == 100) { $(".game-loading").animate({ top: "-100%" }, 500, function () { that.isStart = true; that.start(); that.event(); }); } }; this.start = function () { this.isFlag = false; that.studentLeft.up(); that.studentRight.up(); $(".game-time-text").text((this.gameTime - this.time).toFixed(1)); this.teacher.front(function () { that.teacher.trunback(function () { that.status = status_config.back; that.isFlag = true; that.teacher.back(); }); }); this.listen(); }; this.listen = function () { this.overHandler = setInterval(function () { if (that.isStart && !that.isOver) { that.isCatch(); that.startCount(); if (that.isFlag) { if (that.status == status_config.back) { that.front(that.level[that.difficulty]); } else { that.back(); } } } }, 100); }; this.gameOver = function () { this.teacher.catchup(function () { $(".game-catch-up").show(); }); }; this.timeEnd = function () { $(".game-over").show(); }; this.gameEnd = function () { this.isOver = true; if (this.overHandler) { clearInterval(this.overHandler); } }; this.front = function (intervel) { var r = Math.random(); if (this.time - this.interval >= intervel) { if (r < 0.6) { this.isFlag = false; this.teacher.trunfront(function () { that.interval = that.time; that.status = status_config.front; that.isFlag = true; that.teacher.front(); }); } } else if (this.time - this.sInterval >= 1) { if (r < 0.1) { this.isFlag = false; that.sInterval = that.time; this.teacher.strun(function () { that.isFlag = true; that.teacher.back(); }); } } }; this.back = function () { var r = Math.random(); if (this.time - this.interval >= 1) { if (r < 0.8) { this.isFlag = false; that.status = status_config.back; this.teacher.trunback(function () { that.interval = that.time; that.isFlag = true; that.teacher.back(); }); } } }; this.isCatch = function () { if (!this.isOver) { if (this.status == status_config.front) { if (this.left.isPress || this.right.isPress) { this.catchUp(); return true; } } } return false; }; this.catchUp = function () { this.gameEnd(that.gameOver()); }; this.startCount = function () { this.time = this.time + 0.1; this.difficulty = parseInt(this.time / 10); this.difficulty = this.difficulty >= this.level.length ? this.level.length - 1 : this.difficulty; this.score = this.left.score + this.right.score; $(".game-score-text").text(this.score); if (this.time >= this.gameTime) { this.timeEnd(that.gameEnd()); } }; this.pressDown = function (model) { if (model.handler) { clearInterval(model.handler); } if (this.isStart && !this.isOver) { model.score = model.score + model.step; model.isPress = true; this.scoreAction(model.step, model.scoreContainer); model.handler = setInterval(function () { if (model.isPress) { model.time = model.time + 0.2; if (model.time >= 0.6) { model.step = 10; } if (model.time >= 1.2) { model.step = 50; } if (model.time >= 1.8) { model.step = 100; } model.score = model.score + model.step; that.scoreAction(model.step, model.scoreContainer); } }, 200); } }; this.scoreAction = function (score, container) { var img = $('<img src="img/' + score + '.png" />'); $(container).append(img); img.animate({ "top": "-60" }, 500, function () { setTimeout(function () { img.fadeOut(1000, function () { img.remove(); }); }, 1000); }); }; this.pressUp = function (model) { clearInterval(model.handler); model.isPress = false; model.time = 0; model.step = 5; }; this.event = function () { $(".game-student-left").bind({ "mousedown": function () { that.studentLeft.bow(); that.pressDown(that.left); return false; }, "mouseup": function () { that.studentLeft.up(); that.pressUp(that.left); return false; }, "touchstart": function () { that.studentLeft.bow(); that.pressDown(that.left); return false; }, "touchend": function () { that.studentLeft.up(); that.pressUp(that.left); return false; } }); $(".game-student-right").bind({ "mousedown": function () { that.studentRight.bow(); that.pressDown(that.right); return false; }, "mouseup": function () { that.studentRight.up(); that.pressUp(that.right); return false; }, "touchstart": function () { that.studentRight.bow(); that.pressDown(that.right); return false; }, "touchend": function () { that.studentRight.up(); that.pressUp(that.right); return false; } }); }; }; var status_config = { front: 0, back: 1 }
View Code
代码到这里就结束了,是不是很简单,欢迎各位大神指正,小弟刚学js,只因C#博文都没人赞,所以试试js看看。
试玩地址:点这里
相关文章推荐
- hdu 5532
- ionic 表单输入 ion-checkbox ion-radio ion-toggle ion-spinner
- Xcode7 使用NSURLSession发送HTTP请求的问题
- Kafka学习2_apache kafka系列之在zookeeper中存储结构
- LeetCode64——Minimum Path Sum
- 关于maven+springMVC+mybatis搭建的web项目问题
- HTTP请求流程/组成/状态码
- jDialog弹出层、对话框、提示框jquery插件
- Lua中关于求模与求余的区别介绍
- SQL Server 2016 CTP3 集成R语言安装配置手册
- Java基础笔试题2
- Xcode commit时候出现的错误 already locked
- UINavigationController子类化继承后,app切换主视图返回图标颜色出错
- 使用def文件从dll导出和_declspec(dllexport)导出区别以及调用示例
- Git常用命令
- EditText属性描述(转)
- JS实现超简单的鼠标拖动效果
- Android 数据存储方式有哪几种
- hdu 5521 Meeting(最短路)
- sudo gem install: Unable to download data from http://ruby.taobao.org/ - bad response Not Found 404