canvas猜数游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数</title>
</head>
<body> <canvas id="box" width="500" height="300"></canvas>
<form>
<input type="text" id="guessValue" placeholder="port Canvas Image">
<button id="createImageData">猜猜看?!</button>
</form>
<script>
var guesses = 0;
var message = "Guess the letter from a(lower) to Z(higher)";
var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var today = new Date();
var letterToGuess = '';
var higherOrLower='';
var letterGuessed;
var gameOver = false; function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guess = 0;
letterGuessed = [];
gameOver = false;
window.addEventListener("keydown", eventKeyPressed, true);
drawScreen();
var formElement = document.querySelector("#createImageData");
formElement.addEventListener("click",createImageDataPressed,false);
} function eventKeyPressed(e){
if(!gameOver) {
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);
if (letterPressed == letterToGuess) {
gameOver = true;
} else {
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
console.log(guessIndex);
if (guessIndex < 0) {
higherOrLower = "That is not a letter!"
} else if (guessIndex > letterIndex) {
higherOrLower = "Lower";
} else {
higherOrLower = "higher";
}
}
drawScreen();
}
}
var canvas = document.querySelector("#box");
var ctx = canvas.getContext("2d");
function drawScreen(){
//背景
ctx.fillStyle = "#ffffaa";
ctx.fillRect(0,0,500,300);
//边框
ctx.strokeStyle = "#000000";
ctx.strokeRect(5,5,490,290);
ctx.textBaseline = "top";
//日期
ctx.fillStyle = "#000000";
ctx.font = "10px Sans-Serif";
ctx.fillText(today,150,10);
//消息
ctx.fillStyle = "#ff0000";
ctx.font = "14px Sans-serif";
ctx.fillText(message,125,30); //猜的次数
ctx.fillStyle = "#109910";
ctx.font = "16px Sans-serif";
ctx.fillText("guess: "+guesses+"次!",215,50);
//显示higher或lower
ctx.fillStyle = "#000";
ctx.font = "16px Sans-Serif";
ctx.fillText("Higher or Lower: "+higherOrLower,150,125);
//猜过的字母
ctx.fillStyle = "#ff0000";
ctx.font = "16px Sans-Serif";
ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260);
if(gameOver){
ctx.fillStyle = "#ff0000";
ctx.font = "40px _sans-serif";
ctx.fillText("You got it!",150,180);
}
}
function createImageDataPressed(e){
window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0");
}
initGame();
</script>
</body>
</html>
canvas猜数游戏的更多相关文章
- 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)
1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...
- usaco 猜数游戏
Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...
- (一)Python之猜数游戏
猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...
- 猜数游戏-flag的运用
package my;import java.util.Scanner;public class MyJava { public static void main(String[] ar ...
- Java课程设计——猜数游戏(201521123111 陈伟泽)
Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...
- JAVA课程设计 猜数游戏 团队
团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...
- BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】
2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 604 Solved: 260[Submit][Status ...
- 从scratch到python——猜数游戏
` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...
- VBS猜数游戏
VBS 猜数游戏 2018-11-09 21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...
随机推荐
- SQL编程:group by合并结果字符串 ---> group_concat函数就能行
1.表结构 create table tt(id int,v varchar(30)); insert into tt values(1,'a'),(1,'b'),(2,'b ...
- ORACLE EBS中查看系统已经打过的补丁
SELECT COUNT (BUG_NUMBER) FROM AD_BUGS WHERE BUG_NUMBER LIKE '%7303031%' --对应 patch号 ; --TABLESAD_ ...
- Android-自定义控件-继承View与ViewGroup的初步理解
继承View需要走的流程是: 1.构造实例化, public ChildView(Context context, @Nullable AttributeSet attrs) 2.测量自身的高和宽on ...
- [Git00] Pro Git 一二章读书笔记
记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧. Pro Git (Scott Chacon) 读书笔记: ...
- Angularjs 通过directive实现验证两次输入是否一致的功能
实现效果: 1> 当输入确认密码时验证: 2> 当输入密码时验证: 实现步骤: 1.页面代码: <input class="form-control" type= ...
- Hadoop map任务数量的计算
Hadoop中决定map个数的的因素有几个,由于版本的不同,决定因素也不一样,掌握这些因素对了解hadoop分片的划分有很大帮助, 并且对优化hadoop性能也很有大的益处. 旧API中getSpli ...
- c语言博客作业01—分支、顺序结构
1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 这周 对c语言的学习 明显与其他同学相比较有些滞后,觉得很大原因是暑假没有看教学视频,课前没有预习课本 ...
- Vue的组件和路由
组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...
- java使用Redis6--sentinel单点故障主从自动切换
Redis SentinelSentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中 一.Sentinel作用:1):Master状态检测 2 ...
- linux防火墙(五)—— 防火墙的规则备份与还原
一.第一种备份还原用法,使用工具 iptables-save >/opt/iprules.txt iptables-restore < /opt/iprules.txt #注意导入的文件必 ...