<!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猜数游戏的更多相关文章

  1. 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)

    1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...

  2. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  3. （一）Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  4. 猜数游戏-flag的运用

    package my;import java.util.Scanner;public class MyJava {        public static void main(String[] ar ...

  5. Java课程设计——猜数游戏（201521123111 陈伟泽）

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. JAVA课程设计 猜数游戏 团队

    团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法，傻逼题，猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  9. VBS猜数游戏

    VBS 猜数游戏 2018-11-09  21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...

随机推荐

  1. Java反射API研究(2)——java.lang.reflect详细内容与关系

    对于最新的java1.8而言,reflect中接口的结构是这样的: java.lang.reflect.AnnotatedElement java.lang.reflect.AnnotatedType ...

  2. linux常见命令-查看磁盘空间

    linux查看磁盘使用情况命令 1. 统一每个目录下磁盘的整体情况: df -h 2. 查看指定目录,在命令后直接放目录名,比如查看“usr”目录使用情况:df -h  /usr/ 3. 查看当前目录 ...

  3. 6.nuget安装C#Driver驱动ZooKeeperNet

    一: C# 的Drivers   1. nuget上下载 zookeeper.Net   IWatcher是什么?: client 连接到 server 后,会在server上面注册一个watcher ...

  4. Nutch 问题杂记

    1. 如何绕过目标站点的robots.txt限制 多数站点都是只允许百度.google等搜索引擎抓取的,所以会在robots.txt里限制其他爬虫. nutch自然是会遵循robots协议的,但是我们 ...

  5. [C#学习笔记]分部类和分部方法

    知识在于积累. 前言 好久没写博客了,因为在看<CLR via C#>的时候,竟然卡在了分部方法这一小节几天没下去.今天重新认真阅读,有些感悟,所以在此记录. 然后. 每天早晨第一句,&l ...

  6. Mycat SqlServer 技术栈 实现 主从分离

    先说明下版本:SqlServer2008R2 + MyCat 1.6 现在主从分离 一主一从 用的是 代码 写死的方式  转换下思路 一主两从 或者多从 怎么实现 负载均衡 或者 按权重调用相应库呢 ...

  7. 「SDOI2008」洞穴勘测

    题目链接 戳我 \(Solution\) \(LCT\)裸题 \(Connect\)操作,执行\(link(u,v)\) \(Destroy\)操作,执行\(cut(u,v)\) \(Query\)操 ...

  8. CF553C Love Triangles

    题目链接 题意:给定n个点,给出一些边权为0/1的边,构造完全图,满足对于任何一个三元环,三条边权和为奇.求符合条件的完全图数量,对\(1e9+7\)取模. 分析:其实原题给定的边权是love/hat ...

  9. Visual Studio code安装步骤

    1.官方下载:https://code.visualstudio.com/,本人电脑是window系统  下载之后,双击安装,安装完之后左侧栏那边是英文,如何变为中文: 按快捷键ctrl+shift+ ...

  10. “全栈2019”Java第一百零二章：哪些作用域可以声明局部内部类？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...